<template>
    <div>
        <section>
            <!--查询-->
            <el-col :span="24" class="searchtoolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">

                    <!--预约日期查询-->
                    <el-form-item>
                        <el-input v-model="filters.repairDate" style="width:100px" clearable placeholder="预约日期"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" v-on:click="searchRepairDate">查询</el-button>
                    </el-form-item>
                    <!--时间段查询-->
                    <el-form-item>
                        <el-input v-model="filters.repairTime" style="width:100px" clearable placeholder="时间段"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" v-on:click="searchRepairTime">查询</el-button>
                    </el-form-item>
                    <!--报修地址查询-->
                    <el-form-item>
                        <el-input v-model="filters.repairAddress" style="width:65px" clearable placeholder="地址"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" v-on:click="searchRepairAddres">查询</el-button>
                    </el-form-item>
                    <!--门牌号查询-->
                    <el-form-item>
                        <el-input v-model="filters.doorNumber" style="width:65px" clearable placeholder="门牌号"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" v-on:click="searchDoorNumber">查询</el-button>
                    </el-form-item>
                    <!--报修状态-->
                    <el-form-item>
                        <el-select v-model="statusValue" style="width: 90px" clearable placeholder="状态" value="请选择">
                            <el-option
                                    v-for="item in statusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" v-on:click="searchRepairStatus">查询</el-button>
                    </el-form-item>
                    <!--维修工查询-->
                    <el-form-item>
                        <el-select v-model="workerValue" style="width: 90px" clearable placeholder="维修工" value="请选择">
                            <el-option
                                    v-for="item in repairWorkerOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" v-on:click="searchRepairWorker">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-button type="danger" @click="batchDistribution1" :disabled="this.sels.length===0">批量派工</el-button>
                <el-button type="primary" @click="batchEnd" :disabled="this.sels.length===0">批量完成</el-button>
                <!--刷新-->
                <el-button type="primary" style="width: 135px" @click="renew">刷新</el-button>
            </el-col>
            <!--列表-->
            <el-table :data="repairDataPage[currentPage-1]" highlight-current-row v-loading="listLoading"
                      @selection-change="selsChange"
                      style="width: 100%;;font-size:16px;" border>
                <!--测试 仅列出所需字段 内容统一-->
                <el-table-column type="selection" width="55"/>
                <el-table-column type="index" width="80" label="序号" align="center"/>
                <!--<el-table-column label="操作" width="100">-->
                <!--<template scope="scope">-->
                <!--<el-button type="danger" size="small" @click="dispatchEnable(scope.$index, scope.row)">派工-->
                <!--</el-button>-->
                <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column prop="repairStatus" label="状态" width="100" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="repairAddress" label="报修地址" width="150" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="doorNumber" label="门牌号" width="110" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="repairContext" label="报修内容" min-width="140" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="repairDate" label="预约日期" width="140" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="repairTime" label="时间段" width="140" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="tel" label="联系电话" width="150" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="repairName" label="维修工" width="120" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="repairOrderNumber" label="报修单号" width="200" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="submitTime" label="提交时间" width="200" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="distributeName" label="分发人" width="120" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="distributeTime" label="分发时间" width="200" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="confirmTime" label="派工时间" width="200" show-overflow-tooltip resizable sortable/>
                <el-table-column prop="finishTime" label="完工时间" width="200" show-overflow-tooltip resizable sortable/>
            </el-table>
            <!--分页-->
            <el-col :span="24" class="toolbar">
                <!--分页 统计-->
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[15]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total=total>
                </el-pagination>
                <!--excel导出-->
                <el-button @click="exportExcel" style="margin-top: 2px;" size="medium" type="success">导出Excel
                </el-button>
                <el-button type="primary" @click="printSelect" :disabled="this.sels.length===0">打印选中项</el-button>
            </el-col>
            <!--修缮批量派工界面-->
            <el-dialog title="派工" v-model="dispatchVisible" :close-on-click-modal="false" custom-class="test"
                       center="true">
                <el-form :model="dispatchForm" label-width="80px" ref="dispatchForm" style="font-size: 18px">
                    <el-form-item label="维修工">
                        <el-col :span="10">
                            <el-select v-model="dispatchForm.repairName" placeholder="维修工"
                                       style="width: 70%; font-size: 18px">
                                <el-option label="鞠文平" value="鞠文平"></el-option>
                                <el-option label="姚敬东" value="姚敬东"></el-option>
                                <el-option label="蒋顺奎" value="蒋顺奎"></el-option>
                                <el-option label="林永华" value="林永华"></el-option>
                                <el-option label="吴修宏" value="吴修宏"></el-option>
                                <el-option label="王新芳" value="王新芳"></el-option>
                                <el-option label="赵国勇" value="赵国勇"></el-option>
                                <el-option label="彭发根" value="彭发根"></el-option>
                                <el-option label="张林" value="张林"></el-option>
                                <el-option label="袁天胜" value="袁天胜"></el-option>
                                <el-option label="陆建国" value="陆建国"></el-option>
                                <el-option label="黄强" value="黄强"></el-option>
                                <el-option label="王解兵" value="王解兵"></el-option>
                                <el-option label="王秀强" value="王秀强"></el-option>
                                <el-option label="吴伟毅" value="吴伟毅"></el-option>
                                <el-option label="金石" value="金石"></el-option>
                                <el-option label="周明华" value="周明华"></el-option>
                                <el-option label="安明瑞" value="安明瑞"></el-option>
                                <el-option label="刘保成" value="刘保成"></el-option>
                                <el-option label="李琦" value="李琦"></el-option>
                                <el-option label="潘祖定" value="潘祖定"></el-option>
                                <el-option label="严纪文" value="严纪文"></el-option>
                                <el-option label="韩昌" value="韩昌"></el-option>
                                <el-option label="张志强" value="张志强"></el-option>
                                <el-option label="屠德毅" value="屠德毅"></el-option>
                                <el-option label="张祖明" value="张祖明"></el-option>
                                <el-option label="陈长茂" value="陈长茂"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click.native="dispatchVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="batchsubmit" :loading="dispatchLoading">提交</el-button>
                </div>
            </el-dialog>

        </section>
    </div>

</template>
<div class="dialogCare">
    <span>hello word!</span> //要打印的内容
</div>
<script>
    import {apiBase} from '../../api/global';
    import {getLodop} from "../../lodop/LodopFuncs";
    export default {
        data() {
            return {
                users: [],
                repairAddress: [
                    {
                        value: '学生公寓',
                        label: '学生公寓',
                        children: [{value: '李园', label: '李园'}, {value: '桃园', label: '桃园'}, {
                            value: '桔园',
                            label: '桔园'
                        }, {value: '枫园', label: '枫园'}, {value: '槐园', label: '槐园'},
                            {
                                value: '桂园',
                                label: '桂园'
                            }
                            ,
                            {
                                value: '竹园',
                                label: '竹园'
                            }
                            ,
                            {
                                value: '松园',
                                label: '松园'
                            }
                            ,
                            {
                                value: '梅园',
                                label: '梅园'
                            }
                            ,
                            {
                                value: '杏园',
                                label: '杏园'
                            }
                            ,
                            {
                                value: '枣园',
                                label: '枣园'
                            }
                            ,
                            {
                                value: '蕙园8栋',
                                label: '蕙园8栋'
                            }
                            ,
                            {
                                value: '蕙园9栋',
                                label: '蕙园9栋'
                            }
                            ,
                            {
                                value: '蕙园10栋',
                                label: '蕙园10栋'
                            }

                        ]
                    },
                    {
                        value: '公共设施',
                        label: '公共设施',
                        children: [
                            {
                                value: '东大门',
                                label: '东大门',
                            },
                            {
                                value: '北大门',
                                label: '北大门'
                            },
                            {
                                value: '南大门',
                                label: '南大门'
                            },
                            {
                                value: '西大门',
                                label: '西大门',
                            },
                            {
                                value: '南门广场',
                                label: '南门广场'
                            },
                            {
                                value: '独秀大道',
                                label: '独秀大道'
                            },
                            {
                                value: '磬苑广场',
                                label: '磬苑广场'
                            },
                            {
                                value: '1号配电所',
                                label: '南大门'
                            },
                            {
                                value: '2号配电所',
                                label: '2号配电所',
                            },
                            {
                                value: '3号配电所',
                                label: '3号配电所'
                            },
                            {
                                value: '4号配电所',
                                label: '4号配电所'
                            }
                        ]
                    },
                    {
                        value: '周转房',
                        label: '周转房',
                        children: [
                            {
                                value: '蕙园1栋',
                                label: '蕙园1栋',
                            },
                            {
                                value: '蕙园2栋',
                                label: '蕙园2栋'
                            },
                            {
                                value: '蕙园3栋',
                                label: '蕙园3栋'
                            },
                            {
                                value: '蕙园4栋',
                                label: '蕙园4栋',
                            },
                            {
                                value: '蕙园5栋',
                                label: '蕙园5栋'
                            },
                            {
                                value: '蕙园6栋',
                                label: '蕙园6栋'
                            },
                            {
                                value: '蕙园7栋',
                                label: '蕙园7栋'
                            }
                        ]
                    },
                    {
                        value: '运动场地',
                        label: '运动场地',
                        children: [
                            {
                                value: '南体育场',
                                label: '南体育场',
                            },
                            {
                                value: '北体育场',
                                label: '北体育场'
                            },
                            {
                                value: '北篮球场',
                                label: '北篮球场'
                            },
                            {
                                value: '南篮球场',
                                label: '南篮球场',
                            },
                            {
                                value: '体育馆',
                                label: '体育馆'
                            }
                        ]
                    },
                    {
                        value: '公用房',
                        label: '公用房',
                        children: [
                            {
                                value: '校医院',
                                label: '校医院',
                            },
                            {
                                value: '人文楼',
                                label: '人文楼'
                            },
                            {
                                value: '行政楼',
                                label: '行政楼'
                            },
                            {
                                value: '文典阁',
                                label: '文典阁',
                            },
                            {
                                value: '11号楼',
                                label: '11号楼'
                            },
                            {
                                value: '博北',
                                label: '博北'
                            },
                            {
                                value: '博南',
                                label: '博南',
                            },
                            {
                                value: '实验中心',
                                label: '实验中心'
                            },
                            {
                                value: '笃南',
                                label: '笃南',
                            },
                            {
                                value: '笃北',
                                label: '笃北'
                            },
                            {
                                value: '桔园餐厅',
                                label: '桔园餐厅'
                            },
                            {
                                value: '榴园餐厅',
                                label: '榴园餐厅'
                            },
                            {
                                value: '研究生餐厅',
                                label: '研究生餐厅'
                            },
                        ]
                    }
                ],
                selectBuilding: [],
                //查询数据定义
                filters: {
                    name: '',
                    repairStatus: '',
                    repairDate: '',
                    repairOrderNumber: '',
                    tel: '',
                    repairName: '',
                    doorNumber: '',
                    repairAddress: ''
                },
                //派工数据定义
                dispatchVisible: false,
                dispatchLoading: false,
                dispatchRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ]
                },
                dispatchForm: {
                    repairName: ''
                },
                listLoading: false,
                formLabelWidth: '120px',

                //分页-统计数据定义
                repairDataPage: [],
                total: 0,
                currentPage: 1,
                pageSize: 15,

                sels: [],//列表选中列
                //维修工信息
                repairWorkerOptions: [
                    {value: '林永华', label: '林永华'}, {value: '蒋顺奎', label: '蒋顺奎'},
                    {value: '王新芳', label: '王新芳'}, {value: '吴修宏', label: '吴修宏'},
                    {value: '姚敬东', label: '姚敬东'}, {value: '鞠文平', label: '鞠文平'},
                    {value: '张林', label: '张林'}, {value: '彭发根', label: '彭发根'},
                    {value: '袁天胜', label: '袁天胜'}, {value: '陆建国', label: '陆建国'},
                    {value: '黄强', label: '黄强'}, {value: '王解兵', label: '王解兵'},
                    {value: '王秀强', label: '王秀强'}, {value: '吴伟毅', label: '吴伟毅'},
                    {value: '金石', label: '金石'}, {value: '赵国勇', label: '赵国勇'},
                    {value: '周明华', label: '周明华'}, {value: '安明瑞', label: '安明瑞'},
                    {value: '刘保成', label: '刘保成'}, {value: '李琦', label: '李琦'},
                    {value: '潘祖定', label: '潘祖定'}, {value: '严纪文', label: '严纪文'},
                    {value: '韩昌', label: '韩昌'}, {value: '张志强', label: '张志强'},
                    {value: '屠德毅', label: '屠德毅'}, {value: '张祖明', label: '张祖明'},
                    {value: '陈长茂', label: '陈长茂'}],
                workerValue: '',
                //报修状态信息
                statusOptions: [
                    {value: '已分发', label: '已分发'}, {value: '已完成', label: '已完成'}, {
                        value: '已派发',
                        label: '已派发'
                    }, {value: '已上报', label: '已上报'}, {value: '审核通过', label: '审核通过'}, {value: '审核失败', label: '审核失败'}],
                statusValue: ''
            }
        },
        methods:
            {
                //刷新功能【18-08-04修改(徐)】
                renew: function () {
                    location.reload()
                },
                /*
                   * 将一个数组分成几个同等长度的数组
                   * array[分割的原数组]
                   * size[每个子数组的长度]
                */
                sliceArray(array, size) {
                    let result = [];
                    for (let x = 0; x < Math.ceil(array.length / size); x++) {
                        let start = x * size;
                        let end = start + size;
                        result.push(array.slice(start, end));
                    }
                    return result;
                },
                //页面拆分  xrq  2018-11-13
                cutPage() {
                    let repairInfoData = this.users;
                    this.total = repairInfoData.length;  //拿到所有数据条数
                    repairInfoData.reverse();            //进行倒序排列
                    this.repairDataPage = this.sliceArray(repairInfoData, 15);
                },
                //警告提示
                // open2() {
                //     this.$message({
                //         message: '改状态无法完成维修单！！！！',
                //         type: 'warning'
                //     });
                // },
                //分页
                handleCurrentChange(val2) {
                    this.currentPage = val2;
                    // this.tableData = this.repairDataPage[val2-1];
                }
                ,
                /**
                 * 获取所有报修信息  并进行分组（待优化0716）
                 */
                getUsers() {
                    let _this = this;
                    this.listLoading = true;
                    //请求后台接口
                    this.$ajax({
                        method: 'get',
                        url: apiBase() + '/v1/allrepaircur',
                    }).then(function (res) {
                        _this.users = res.data.data;
                        _this.cutPage();
                        _this.listLoading = false;
                    }).catch(function (error) {
                        console.log(error);
                    })
                }
                ,
                //预约日期查询
                searchRepairDate: function () {
                    let arr = [];
                    if (this.filters.repairDate === "") {
                        this.getUsers();
                    } else {
                        for (let i = 0; i < this.users.length; i++) {
                            if (this.users[i].repairDate.indexOf(this.filters.repairDate) !== -1) {
                                arr.push(this.users[i])
                                console.log(this.users[i])
                            }
                        }
                        this.users = arr.reverse();
                        this.cutPage();
                    }
                },
                //时间段查询
                searchRepairTime: function () {
                    let arr = [];
                    if (this.filters.repairTime === "") {
                        this.getUsers();
                    } else {
                        for (let i = 0; i < this.users.length; i++) {
                            if (this.users[i].repairTime.indexOf(this.filters.repairTime) !== -1) {
                                arr.push(this.users[i])
                                console.log(this.users[i])
                            }
                        }
                        this.users = arr.reverse();
                        this.cutPage();
                    }
                }
                ,
                //门牌号查询
                searchDoorNumber: function () {
                    let arr = [];
                    if (this.filters.doorNumber === "") {
                        this.getUsers();
                    } else {
                        for (let i = 0; i < this.users.length; i++) {
                            if (this.users[i].doorNumber === this.filters.doorNumber) {
                                arr.push(this.users[i])
                            }
                        }
                        this.users = arr.reverse();
                        this.cutPage();
                    }
                }
                ,
                //报修地址查询
                searchRepairAddres: function () {
                    let arr = [];
                    if (this.filters.repairAddress === "") {
                        this.getUsers();
                    } else {
                        for (let i = 0; i < this.users.length; i++) {
                            if (this.users[i].repairAddress.indexOf(this.filters.repairAddress) != -1) {
                                arr.push(this.users[i])
                            }
                        }
                        this.users = arr.reverse();
                        this.cutPage();
                    }
                }
                ,
                //报修状态查询
                searchRepairStatus: function () {
                    let arr = [];
                    if (this.statusValue === "") {
                        this.getUsers();
                    } else {
                        for (let i = 0; i < this.users.length; i++) {
                            if (this.users[i].repairStatus.indexOf(this.statusValue) !== -1) {
                                arr.push(this.users[i])
                                console.log(this.users[i])
                            }
                        }
                        this.users = arr.reverse();
                        this.cutPage();
                    }
                },
                //维修工查询
                searchRepairWorker: function () {
                    console.log(this.workerValue)
                    let _this = this;
                    let arr = [];
                    if (this.workerValue === "") {
                        this.getUsers();
                    } else {
                        for (let i = 0; i < this.users.length; i++) {
                            if (this.users[i].repairName === this.workerValue) {
                                arr.push(this.users[i])
                                console.log(this.users[i])
                            }
                        }
                        console.log(arr);
                        this.users = arr.reverse();
                        this.cutPage();
                    }
                },
                selsChange: function (sels) {
                    this.sels = sels;
                },
                // //派单
                // batchDistribution: function () {
                //     var _this = this;
                //     this.$refs.dispatchForm.validate((valid) => {
                //         if (valid) {
                //             this.$confirm('确认提交吗？', '提示', {}).then(() => {
                //                 this.dispatchLoading = true;
                //                 let para = Object.assign({}, this.dispatchForm);
                //                 console.log(para);
                //                 this.$ajax({
                //                     method: 'get',
                //                     url: apiBase()+'/v1/dispatch',
                //                     params: {
                //                         id: para.id,
                //                         repairName: para.repairName
                //                     }
                //                 }).then(function (res) {
                //                     _this.dispatchLoading = false;
                //                     _this.$message({
                //                         message: '提交成功',
                //                         type: 'success'
                //                     });
                //                     _this.$refs['dispatchForm'].resetFields();
                //                     _this.dispatchVisible = false;
                //                     _this.getUsers();
                //                 }).catch(function (error) {
                //                     console.log(error);
                //                 })
                //             });
                //         }
                //     });
                // }，
                //批量完成
                //批量完成
                batchEnd: function () {
                    let _this = this;
                    let ids = this.sels.map(item => item.id).toString();
                    // console.log(ids);
                    // let list = this.sels;
                    // console.log(list)
                    this.$confirm('确认完成选中记录吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.listLoading = true;
                        this.$ajax({
                            method: 'patch',
                            url: apiBase() + '/v1/allend',
                            params: {ids}
                        }).then(function (res) {
                            console.log(res);
                            _this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            _this.getUsers();
                        }).catch(function (error) {
                            console.log(error);
                        })
                    }).catch(() => {
                    });
                }
                ,
                //批量派工使能
                batchDistribution1: function () {
                    let ids = this.sels.map(item => item.id).toString();
                    this.ids = ids;
                    this.dispatchVisible = true;
                },
                //批量派工选择维修工
                batchsubmit: function () {
                    let _this = this;
                    let ids = this.ids;
                    console.log(ids);
                    this.$refs.dispatchForm.validate((valid) => {
                        if (valid) {
                            this.$confirm('确认提交吗？', '提示', {}).then(() => {
                                this.dispatchLoading = true;
                                let para = Object.assign({}, this.dispatchForm);
                                console.log(para);
                                this.$ajax({
                                    method: 'PATCH',
                                    url: apiBase() + '/v1/alldispatch',
                                    params: {
                                        ids: ids,
                                        repairName: para.repairName
                                    }
                                }).then(function (res) {
                                    console.log(res);
                                    _this.dispatchLoading = false;
                                    _this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    _this.$refs['dispatchForm'].resetFields();
                                    _this.dispatchVisible = false;
                                    _this.getUsers();
                                }).catch(function (error) {
                                    console.log(error);
                                })
                            });
                        }
                    });
                },
                //导出excel 实现选择性导出表格
                exportExcel() {
                    import('@/vendor/Export2Excel').then(excel => {
                        const tHeader = ['预约日期', '时间段', '报修地址', '门牌号', '报修内容', '联系电话', '维修工', '用户签字'];//表头
                        let filterVal = ['repairDate', 'repairTime', 'repairAddress', 'doorNumber', 'repairContext', 'tel', 'repairName'];//表头对应字段名
                        let list = this.sels;
                        let data = this.formatJson(filterVal, list);//数据格式化
                        let index1 = '维修信息列表';//导出时文件名
                        excel.export_json_to_excel(tHeader, data, index1)//导出文件
                    })
                }
                ,
                //对导出数据格式化处理
                formatJson(filterVal, jsonData) {
                    return jsonData.map(
                        v => filterVal.map(
                            j => {
                                if (j === 'repairStatus') {
                                    if (v[j] == '待处理') {
                                        return v[j] = '待处理'
                                    }
                                    if (v[j] == '已分发') {
                                        return v[j] = '已分发'
                                    }
                                    if (v[j] == '已完成') {
                                        return v[j] = '已完成'
                                    }
                                    if (v[j] == '已取消') {
                                        return v[j] = '已取消'
                                    }
                                    if (v[j] == '已派发') {
                                        return v[j] = '已派发'
                                    }
                                    if (v[j] == '已上报') {
                                        return v[j] = '已上报'
                                    }
                                    if (v[j] == '审核通过') {
                                        return v[j] = '审核通过'
                                    }
                                    if (v[j] == '审核失败') {
                                        return v[j] = '审核失败'
                                    }
                                } else {
                                    return v[j]
                                }
                            }
                        )
                    )
                },

                //打印函数
                printSelect() {
                    let LODOP = getLodop();
                    for (let i = 0; i < this.sels.length; i++) {
                        LODOP.SET_PRINT_PAGESIZE(0, 210, 297, "");  //打印页面尺寸  毫米单位   A4大小
                        LODOP.ADD_PRINT_RECT(65, 38, 720, 440, 0, 1);  //  半张A4
                        LODOP.ADD_PRINT_TEXT(24, 329, 145, 40, "维修工单");
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 18);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
                        LODOP.ADD_PRINT_LINE(106, 38, 105, 758, 0, 1);
                        LODOP.ADD_PRINT_LINE(146, 38, 145, 758, 0, 1);
                        LODOP.ADD_PRINT_LINE(186, 38, 185, 758, 0, 1);
                        LODOP.ADD_PRINT_LINE(226, 38, 225, 758, 0, 1);
                        LODOP.ADD_PRINT_LINE(306, 38, 305, 758, 0, 1);
                        LODOP.ADD_PRINT_LINE(346, 38, 345, 758, 0, 1);
                        LODOP.ADD_PRINT_LINE(466, 38, 465, 758, 0, 1);
                        LODOP.ADD_PRINT_LINE(185, 168, 65, 169, 0, 1);
                        LODOP.ADD_PRINT_LINE(185, 398, 65, 399, 0, 1);
                        LODOP.ADD_PRINT_LINE(185, 528, 65, 529, 0, 1);
                        LODOP.ADD_PRINT_TEXT(70, 403, 121, 31, "联系电话");
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(70, 42, 121, 31, "报修单号");
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(150, 44, 121, 31, "报修地址");
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(111, 403, 121, 31, "预约时间");
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(151, 403, 121, 31, "宿舍号");
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(312, 292, 211, 31, "维修耗材");
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(195, 301, 191, 31, "报修内容");
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(234, 48, 688, 66, this.sels[i].repairContext);
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(70, 175, 218, 31, this.sels[i].repairOrderNumber);
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(151, 173, 218, 31, this.sels[i].repairAddress);
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(110, 176, 218, 31, this.sels[i].repairDate);
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(71, 533, 218, 31, this.sels[i].tel);
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(110, 534, 218, 31, this.sels[i].repairTime);
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(150, 535, 218, 31, this.sels[i].doorNumber);
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(109, 43, 121, 31, "预约日期");
                        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(478, 136, 78, 25, this.sels[i].repairName);
                        LODOP.ADD_PRINT_TEXT(478, 70, 65, 25, "维修工：");
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
                        LODOP.ADD_PRINT_TEXT(479, 496, 120, 25, "报修人签字：");
                        LODOP.SET_PRINT_STYLEA(0, "Alignment", 2);

                        LODOP.NewPage();
                    }
                    LODOP.PREVIEW();//打印预览
                },
            }
        ,
        mounted() {
            this.getUsers();
        }
    }

</script>

<!--不可以使用scoped-->
<style>
    .test {
        width: 30%;
    }
</style>